
$tree_nav_height: 48px;
.tree_header{
  height: $tree_nav_height;
  background: $theme_color;
  .list-inline{
    li{
      a{
        height: $tree_nav_height;
        line-height: $tree_nav_height;
        color: #ffffff;
        padding: 0 1em;
        font-size: 15px;
      }
    }
  }
  .user_box{
    width: 100px;
    position: relative;
    &:hover{
      .drop_info{
        display: block;
      }
    }
    .user{
      width: 100%;
      display: inline-block;
      height: $tree_nav_height;
      line-height: $tree_nav_height;
      background: rgba(0, 0, 0, .2);
      color: #ffffff;
      text-align: center;
      cursor: pointer;
    }
    .drop_info{
      position: absolute;
      display: none;
      top: 100%;
      left: 0;
      z-index: 99;
      width: 100%;
      li{
        a{
          width: 100%;
          display: inline-block;
          line-height: 35px;
          background: #333333;
          color: #ffffff;
          text-align: left;
          padding: 0 10px;
          border-bottom: 1px solid #404040;
          &:hover{
            @extend .active;
          }
        }
        .active{
          background: #1a1a1a;
        }
      }
    }
  }
  @media screen and (max-width: 768px){
    .list-inline{
      li{
        padding: 0;
        a{
          padding: 0 4px;
        }
      }
    }
  }
}